<template>

  <div class="common-table">
    <span class="fr" style="margin: 2px;color: orangered;cursor: pointer;" @click="close">关闭</span>
    <el-table
      :data="tableData"
      @row-dblclick="handleRowDoubleClick"
      height="100%"
      border
      stripe
      row-key="id"
      :header-cell-style="{ background: '#fff',color: '#000',
      textAlign:'center',fontWeight:'bold',borderWidth:'1px'}"
      @selection-change="handleSelectionChange"
    >

      <el-table-column
        show-overflow-tooltip
        v-for="(item, index) in tableLabel"
        :key="index"
        :prop="item.name"
        :label="item.label"
        :min-width="item.width ? item.width : 125"
      >
        <template slot-scope="scope">
          <span v-if="item.type === 'gender' ">{{ scope.row[item.name] ? '女' : '男' }}  </span>
          <el-switch v-model="scope.row[item.name]" v-else-if="item.type === 'switch' " style="display: block"
                     active-color="#13ce66"
                     inactive-color="#ff4949"
                     active-text="正常"
                     inactive-text="异常"
                     :active-value="1"
                     :inactive-value="0"
                     @change="handleStatusChange(scope.row)"
          ></el-switch>
          <span v-else>{{ scope.row[item.name] }}</span>
        </template>
      </el-table-column>
    </el-table>

  </div>

</template>
<script>

export default {
  name: 'EsTable',
  props: {
    tableData: Array,
    tableLabel: Array,
    pageConfig: Object,
    operationWidth: Number
  },
  data() {
    return {}
  },
  methods: {
    handleSizeChange(size) {
      this.$bus.$emit("sizeChange", size)
    },
    handleCurrentChange(current) {
      this.$bus.$emit("currentChange", current)
    },
    del(row) {
      this.$bus.$emit("del", row)
    },
    edit(row) {
      this.$bus.$emit("edit", row)
    },
    handleSelectionChange(val) {
      this.$bus.$emit("selectionChange", val)
    },
    handleStatusChange(row) {
      this.$bus.$emit("statusChange", row)
    },
    handleRowDoubleClick(row, column, event) {
      this.$emit('dbClick',row);
    },
    close(){
      this.$emit('dbClick',null)
    }
  }
}
</script>
<style lang="less" scoped>
.common-table {
  height: calc(100% - 62px);
  background-color: white;
  position: relative;

  .pager {
    position: absolute;
    bottom: 20px;
    right: 20px;
  }
}
</style>
